<template>
    <div class="device_right">
        <div class="detection_box">
            <div class="device_right_title">
                <div>设备检测</div>
            </div>
            <div class="detection_chart">
                <img src="../../../assets/images/设备检测.png">
                <div>
                    <p>正常设备</p>
                    <div>
                        <dv-percent-pond :config="config" style="width:100px;height:30px;" />
                    </div>
                    <p>异常设备</p>
                    <div>
                        <dv-percent-pond :config="config" style="width:100px;height:30px;" />
                    </div>
                </div>
            </div>
            <div class="detection_table" demo-bg>
                <dv-scroll-board :config="detectiondata" />
            </div>
        </div>

        <div class="alarm_box">
            <div class="device_right_title">
                <div>实时警报</div>
            </div>
            <div class="alarm_table" demo-bg>
                <dv-scroll-board :config="alarmdata" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import './right.css'
import { getAlarm, getDetection } from '../../../api';
const config = reactive({
    value: 66,
    borderWidth: 3,
    borderRadius: 4,
    borderGap: 5,
})

const detectiondata = reactive({
    header: ['序号', '设备名称', '设备状态'],
    data: [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3'],
    ],
    // index: true,
    columnWidth: [50],
    align: ['center'],
})
const alarmdata = reactive({
    header: ['', '楼层', '设备状态'],
    data: [
        ['行1列1', '行1列2', '行1列3'],
        ['行2列1', '行2列2', '行2列3'],
        ['行3列1', '行3列2', '行3列3'],
        ['行4列1', '行4列2', '行4列3'],
        ['行5列1', '行5列2', '行5列3'],
        ['行6列1', '行6列2', '行6列3'],
        ['行7列1', '行7列2', '行7列3'],
        ['行8列1', '行8列2', '行8列3'],
        ['行9列1', '行9列2', '行9列3'],
        ['行10列1', '行10列2', '行10列3'],
    ],
    // index: true,
    columnWidth: [50],
    align: ['center'],
})

const DetectionData = async () => {
    try {
        let res = await getDetection();

        detectiondata.data = res.data.data.map(item => {
            return [item.ettg_serial, item.ettg_type, item.ettg_status]
        })

    } catch (error) {
        console.error('获取设备检测数据时出错:', error);
    }
}
const AlarmData = async () => {
    try {
        let res = await getAlarm();

        alarmdata.data = res.data.data.map(item => {
            return [item.serial, item.clpe_place, item.clpe_collPolice];
        })
    } catch (error) {
        console.error('获取实时警报数据时出错:', error);
    }
}

onMounted(() => {
    DetectionData();
    AlarmData();
})
</script>

<style></style>